<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>限时秒杀</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 702px;
				height: 378px;
				background: url(flash_sale.png);
				margin:0 auto;
			}
			#box div{
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				display: inline-block;
				position: relative;
				top: 260px;
				left: 300px;
				margin-left: 10px;
				text-align: center;
				line-height: 50px;				
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<div id="day"></div>
			<div id="h"></div>
			<div id="m"></div>
			<div id="s"></div>
		</div>
		<script type="text/javascript">
			/*1、获取结束时间（转成毫秒）
				2、定义函数:
				       获取剩余时间：结束时间-当前时间
				       剩余时间显示在页面4个框
				3、计时器每隔1秒执行函数*/
			//当前时间
			var now=new Date();
			//结束时间的毫秒数：当前时间的毫秒数+2天后的毫秒数
		//	var endSeconds=now.getTime()+24*60*60*2*1000;
		//结束时间 10:37:00
			var endSeconds=new Date('2018-06-05 10:49:00').getTime();
			//定义秒杀函数
			function seckill(){
				var nowtime=new Date();
				//获取剩余时间(秒数)
				var remain=(endSeconds-nowtime.getTime())/1000;
				if(remain>0){
				//把秒装换成： 天、小时、分钟、秒
				var day=parseInt(remain/(60*24*60));
				var h=parseInt((remain/(60*60))%24);
				var m=parseInt((remain/60)%60);
				var s=parseInt(remain%60);
				}else{
					//清除计时器
					clearInterval(timer);
					day=h=m=s=0;
					alert('秒杀')
				}
				//用两位数表示剩余的天、小时、分钟、秒
				
				day=(day<10?'0'+day:day);
				h=(h<10?'0'+h:h);
				m=(m<10?'0'+m:m);
				s=(s<10?'0'+s:s);
				//剩余天、小时、分钟、秒  显示在页面上
				document.getElementById('day').innerHTML=day+'天';
				document.getElementById('h').innerHTML=h+'时';
				document.getElementById('m').innerHTML=m+'分';
				document.getElementById('s').innerHTML=s+'秒';
			}
			var timer=window.setInterval(seckill,1000);
		</script>
	</body>
</html>
